

<template>
  <el-drawer v-model="isDrawerVisible" title="歌曲详情" :with-header="true">
    <el-form ref="form" :model="music" label-width="80px">
      <el-descriptions direction="vertical" :column="1" border>
		    <el-descriptions-item label="编号">{{ music.music_id }}</el-descriptions-item>
		  <el-descriptions-item label="歌名">
		   {{ music.music_name }}
		  </el-descriptions-item>
		  <el-descriptions-item label="歌手">
		   {{ music.music_author }}
		  </el-descriptions-item>
		  <el-descriptions-item label="类别">
		{{ music.music_type===1?'华语':music.music_type===2?'日韩':music.music_type===3?'欧美':music.music_type===5?'纯音乐':'其他' }}
		  </el-descriptions-item>
		  <el-descriptions-item label="等级">
		    {{ music.music_level===1?'认证':'公开' }}
		  </el-descriptions-item>
		  <el-descriptions-item label="是否热门">
		   {{ music.music_rm===1?'热门':'常规' }}
		  </el-descriptions-item>
		  <el-descriptions-item label="状态">
		    {{ music.music_state===1?'发布':music.music_state===2?'违规':'待审核' }}
		  </el-descriptions-item>
		<el-descriptions-item label="歌词">{{music.music_gc}}</el-descriptions-item>
		<!-- <el-descriptions-item label="发布时间">{{music.music_date}}</el-descriptions-item>
		<el-descriptions-item label="发帖时间">{{music.music_time}}</el-descriptions-item> -->
		<el-descriptions-item label="发帖人">{{music.music_user_name}}</el-descriptions-item>
		<el-descriptions-item label="文件名">{{music.music_file}}</el-descriptions-item>
		<el-descriptions-item label="链接">{{music.music_url}}</el-descriptions-item>
		<el-descriptions-item label="封面">
		  <el-image
		    style="width: 200px; height: 200px; border-radius: 10px;"
		    :src="'/api/src/musics/image/'+music.music_img"
		    :preview-src-list="['/api/upload/'+music.music_img]"
		    fit="cover"
		  >
		  </el-image>
		</el-descriptions-item>
      </el-descriptions>
      
      <!-- 操作按钮 -->
      <div style="text-align: right; margin-top: 20px;">
		<el-button  type="primary" @click="isDrawerVisible = false">关闭</el-button>
      </div>
    </el-form>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const isDrawerVisible = ref(false);
//用于存储修改之后的数据，传到后端
const music = ref();

const handleDetailData = (obj) => {
  isDrawerVisible.value = true;
  music.value = Object.assign({},obj);
}

// 将handleDetailData暴露给父组件
defineExpose({
  handleDetailData
})
</script>

<style scoped>
/* 样式 */
</style>